<template>
  <div>{{ man }}</div>
  <div>
    <button @click="goChange">改变</button>
  </div>
  <div>
    <button @click="goChange2" style="margin-right: 10px">ref</button>
    <button @click="goChange3" style="margin-right: 10px">shallowRef</button>
    <button @click="goChange4" style="margin-right: 10px">shallowRef2</button>
    <button @click="goChange5">ref affect shallowRef</button>
  </div>
  <div>{{ a }}-----{{ b }}</div>

  <div ref="dom" @click="show">我是dom</div>
</template>

<script lang="ts" setup>
import { ref, isRef, shallowRef } from "vue";
import type { Ref } from "vue";

type M = {
  name?: string;
};
// 1.简单的类型，自动做类型推导
const man = ref<M>({ name: "小满" });
// 2.复杂的类型，额外申明
const woman: Ref<M> = ref({ name: "那里" });
const goChange = () => {
  man.value.name = "大满";
  console.log(man);
};

// isRef判断是否ref对象
console.log(isRef(man));
const student = <M>{ name: "124" };
console.log(isRef(student));

// ref深层次 shallowRef浅层次
// ref和shallowRef是不能一起写的，不然会影响shallowRef视图的更新
const a = ref({ name: "人才" });
const b = shallowRef({ name: "鬼才" });
const goChange2 = () => {
  a.value.name = "人才2";
};
const goChange3 = () => {
  b.value.name = "鬼才2"; // 无法修改
};
const goChange4 = () => {
  b.value = {
    name: "鬼才3",
  }; // 无法修改
};
const goChange5 = () => {
  a.value.name = "人才5";
  b.value.name = "鬼才5"; // 无法修改
};

const dom = ref<HTMLDivElement>();
const show = () => {
  console.log(dom.value);
};
</script>
<style scoped>
div {
  margin-bottom: 10px;
}
</style>
